<!--
 * @Author: your name
 * @Date: 2021-09-10 09:57:25
 * @LastEditTime: 2021-09-13 13:52:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \backstage-management-system\system\src\views\pm\index.vue
-->
<template>
  <div class="box">
    <div class="select">
      <div><i class="el-icon-search"></i>&nbsp; 筛选查询</div>
      <button class="anniu">查询结果</button>
    </div>
    <div class="headbox">
      <template>
        <span class="num"> 报销人：</span
        ><el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="loading0"
        >
          <el-option
            v-for="item in options0"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="num"> 合同名称：</span
        ><el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="loading0"
        >
          <el-option
            v-for="item in options0"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <template>
        <span class="num"> 报销状态：</span>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </div>
    <div class="select1">
      <span> <i class="el-icon-s-operation"></i>&nbsp; 数据列表</span
      ><el-button>新增</el-button>
    </div>
    <div class="data-table">
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="number"
            label="合同编号"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="designation"
            label="合同名称"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="合同类型"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="current"
            label="负责人"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="state"
            label="生效日期"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="date"
            label="失效日期"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="prop">
            <el-button type="info" size="mini">跟进</el-button>
            &nbsp;&nbsp;
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="onConfirm(prop.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-button type="success" size="mini" @click="$router.push('/admin/detail' + prop.row.id)">详情</el-button>
            </template>
            <!-- <span class="active" >修改</span>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="onConfirm(prop.row)">
                  <el-button slot="reference" type="danger" size="mini">删除</el-button>
                </el-popconfirm>
            <span class="active" @confirm="onConfirm(prop.row)">删除</span>
            <span class="active">详情</span> -->
          </el-table-column>
        </el-table>
      </template>
      <el-pagination  @current-change="onPageChange" background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { get } from "@/utils/request"
// import { getContList } from "@/api/userApi"
export default {
  data() {
    return {
      tableData: [],
      options0: [],
      value0: [],
      list0: [],
      loading0: false,
      states: [],
      options: [
        {
          value: "选项1",
          label: "进行中",
        },
        {
          value: "选项2",
          label: "已完成",
        },
        {
          value: "选项3",
          label: "已延期",
        },
        {
          value: "选项",
          label: "全部",
        },
      ],
      value: "",
    };
  },
  mounted() {
    this.onPageChange()
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading0 = true;
        setTimeout(() => {
          this.loading0 = false;
          this.options0 = this.list0.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options0 = [];
      }
    },
    async onConfirm(row) {
      let ret = await this.$store.dispatch('cont/deleteUserAction', row.id)
      if (ret.code === 0) {
        // 更新数据源
        this.tableData = this.tableData.filter((item) => item.id != row.id)
      }
    },
     async onPageChange(page = 1) {
      let ret = await this.$store.dispatch('cont/getUserList', page)
      this.tableData = ret.data.userData
    },
  },
};
</script>

<style lang="scss" scoped>


::v-deep{
  .el-button{
    background: rgb(190, 216, 226);
  }
  [data-v-9dd11a62] .el-button{
    color: #fff;
    border-radius: 30px;
  }
  .anniu[data-v-9dd11a62]{
    background: rgb(190, 216, 226);
    border-radius: 30px;
    color: #fff;
  }
}


.el-select {
  width: 150px;
}
.box {
  background-color: #fff;
}
.headbox {
  box-sizing: border-box;
  border: 1px solid #b4b4b4;
  border-top: 0;
  margin: 0 0 0 30px;
  padding: 20px;
  font-size: 12px;
  color: #b4b4b4;
  background-color: #fff;
}
.select {
  margin: 30px 0 0 30px;
  background-color: rgba(242, 242, 242, 1);
  padding: 20px;
  position: relative;
}
.anniu {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 65px;
  height: 40px;
  background-color: rgba(255, 255, 255, 1);
  border: 0;
  color: #63b9be;
  cursor: pointer;
}
.select1 {
  margin: 30px 0 0 30px;
  background-color: rgba(242, 242, 242, 1);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}
.el-main {
  overflow: scroll;
}
.data-table {
  margin: 0 0 0 30px;
}
.el-table {
  font-size: 12px;
}
.el-pagination {
  margin-top: 30px;
}
.anniu:hover {
  background-color: #63b9be;
  color: #fff;
}
.el-button:hover {
  background-color: #63b9be;
  color: #fff;
}
.el-button {
  border: 0;
  border-radius: 0;
  font-size: 12px;
  color: #63b9be;
}
.active {
  color: #63b9be;
  margin: 0 5px;
  cursor: pointer;
}
.active:hover {
  text-decoration: underline;
}
i {
  font-size: 18px;
  font-weight: 900;
}
</style>